<script setup lang="ts">
import { LedScreenCanvas, Matrix, Rectangle } from "led-screen-canvas";
import { ref } from "vue";

const canvasRef = ref();

const onReady = () => {
  const [w, h, size] = [15360, 8640, 50];
  const matrix = new Matrix(0, 0, w, h, size, size);
  matrix.canMove = false;
  matrix.canHover = true;
  for (let ofx = 0; ofx < w; ofx += 100) {
    for (let ofy = 0; ofy < h; ofy += 100) {
      for (let y = 0; y < 100; y++) {
        for (let x = 0; x <= y; x++) {
          const [tx, ty] = [ofx + (100 - x - 1), ofy + y];
          matrix.setActiveGrid(true, tx, ty);
        }
      }
    }
  }
  canvasRef.value.addShapes([matrix]);
};
</script>

<template>
  <a-space direction="vertical" style="width: 100%" wrap>
    <a-space>
      <a-button type="primary" @click="canvasRef.start()">开始渲染</a-button>
      <a-button type="primary" status="danger" @click="canvasRef.stop()"
        >暂停渲染(避免多个画布导致浏览器卡顿)</a-button
      >
      <a-button @click="canvasRef.resetZoom()">缩放到最适合的大小</a-button>
      <a-button @click="canvasRef.zoom2RealSize()">缩放到原始尺寸</a-button>
    </a-space>
    <led-screen-canvas
      style="height: 400px; background-color: #dddddd"
      ref="canvasRef"
      @on-ready="onReady"
      @on-click="(shape, e) => shape?.setActive(!shape.isActive(e), e)"
    />
  </a-space>
</template>

<style scoped lang="less"></style>
